<!doctype html>
<html>
<head>
    <script src="../../node_modules/seedrandom/seedrandom.js"></script>
    <script>Math.seedrandom('a22ebc7c488a3a47');</script>
    <script src="../../node_modules/mockdate/src/mockdate.js"></script>
    <script>MockDate.set('2000-01-01', 0);</script>
    <script src="../../node_modules/d3/dist/d3.js"></script>
    <script src="../../packages/d3fc/build/d3fc.js"></script>
    <script src="../index.js"></script>
    <link rel="stylesheet" href="../index.css">
    <link rel="icon" type="image/png" href="">
    <style>
        body {
            flex-direction: column;
        }
        path {
            fill: none;
            stroke-width: 2;
        }
        .subsampled {
            stroke: hotpink;
        }
        .raw {
            stroke: rgb(128, 128, 128);
            stroke-width: 0.5;
        }
        svg {
            border: 1px solid rgb(192, 192, 192);
            margin-left: auto;
            margin-right: auto;
            display: block;
        }
        .row {
            margin-top: 10px;
        }
        .jumbotron {
            padding: 1em 0;
        }
        input[type=text] {
            width: 60px !important;
        }
        .form-group, .row #statistics {
            margin-left: 10px;
            border-left: 1px solid rgb(192, 192, 192);
            padding-left: 10px;
        }
        g.label circle {
            display: none;
        }
    </style>
</head>

<body>
    <div>
        <svg></svg>
    </div>
    <form id="strategy-form">
        <h4>Strategy:</h4>
        <p>
            <label for="strategy-selector">Strategy</label>
            <select id="strategy-selector">
                <option value="modeMedian">Mode Median</option>
                <option value="largestTriangleOneBucket">Largest Triangle One Bucket</option>
                <option value="largestTriangleThreeBucket">Largest Triangle Three Bucket</option>
            </select>
        </p>
        <p>
            <label for="bucket-size">Bucket Size</label>
            <input type="range" id="bucket-size" value="10" min="1" max="100" />
            <label for="bucket-size" id="bucket-size-text">10</label>
        </p>
    </form>
    <form id="data-form">
        <h4>Random Data:</h4>
        <p>
            <label for="data-count">Data Count</label>
            <input type="text" id="data-count" value="2000">
        </p>
        <p>
            <button id="generate-chart">Generate chart</button>
            <button id="generate-circle">Generate circle</button>
        </p>
    </form>
    <p id="statistics"></p>

    <script src="index.js"></script>
</body>

</html>